{% extends 'base.html' %}

{% block title %}我的家庭 - {{ block.super }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <h2><i class="fas fa-home"></i> 我的家庭</h2>
            <a href="{% url 'accounts:family-create' %}" class="btn btn-primary">
                <i class="fas fa-plus"></i> 创建新家庭
            </a>
        </div>
    </div>
</div>

<div class="row">
    {% if families %}
        {% for family in families %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">{{ family.name }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">
                            <i class="fas fa-users"></i> 成员数：{{ family.members.count }}
                        </p>
                        <p class="card-text">
                            <i class="fas fa-crown"></i> 创建者：{{ family.creator.username }}
                        </p>
                        <p class="card-text">
                            <i class="fas fa-calendar"></i> 创建时间：{{ family.created_at|date:"Y-m-d" }}
                        </p>
                    </div>
                    <div class="card-footer">
                        <a href="{% url 'accounts:family-detail' family.pk %}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-info-circle"></i> 查看详情
                        </a>
                        {% if user == family.creator %}
                            <span class="badge bg-primary float-end">创建者</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle"></i> 您还没有加入任何家庭，现在就去创建一个吧！
            </div>
        </div>
    {% endif %}
</div>
{% endblock %} 